<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRoute } from 'vue-router';
import { getMemberUnit4IdApi } from "../../service/applyaudit/applyaudit";
const route = useRoute();
const unitInfo = ref({});
function getMemberUnit4Id(unitId) {
  console.log(route.query.unitId);
  getMemberUnit4IdApi(unitId).then((resp) => {
    if (resp.data.code === 0) {
      unitInfo.value = resp.data.result;
    } else {

    }
  });
}
onMounted(() => {
  console.log(route.query);
  getMemberUnit4Id(route.query.unitId);
})
</script>

<template>
  <div>
    <div class="detailedImg">
      <div class="icon">
        <img :src="unitInfo.unitLogo" alt="">
      </div>
      <div>
        <div class="school">{{ unitInfo.unitName }}</div>
        <div style="width: 26px;height: 4px;background: #1891FF;margin: 20px 0;"></div>
        <div class="synopsis">{{ unitInfo.unitBrief }}</div>
      </div>

    </div>
    <div>
      <div class="title">
        <div style="width: 240px;height: 1px;background: #B3DBFF;"></div>
        <div class="text">会员单位简介</div>
        <div style="width: 240px;height: 1px;background: #B3DBFF;"></div>
      </div>
      <div class="enTitle">Introduction of member units</div>
    </div>
    <div class="context">
      <div class="contextImg">
        <img :src="unitInfo.coverImage" alt="">
      </div>
      <div class="contextText">
        <div class="schooltitle">{{ unitInfo.unitName }}</div>
        <div class="text" v-html="unitInfo.unitDesc">

        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.detailedImg {
  height: 280px;
  width: 100%;
  background: url('@/assets/img/detailedImg.png') no-repeat;
  padding: 0 10.8%;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .icon {
    width: 120px;
    height: 120px;
    margin-right: 25px;
    background: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .school {
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
  }

  .synopsis {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 13px;
    opacity: 0.7;
  }
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;

  .text {
    margin: 0 15px;
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;

    p {
      text-indent: 2em;
    }

  }
}

.enTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  font-size: 18px;
  font-family: AlibabaPuHuiTi_2_35_Thin;
  font-weight: 400;
  color: #A9AAAB;
}

.context {
  // padding: 0 7.8%;
  width: 1500px;
  margin: 65px auto 0;
  // margin-top: 65px;
  display: flex;
  justify-content: flex-start;

  .contextImg {
    width: 420px;
    height: 520px;

    position: relative;
    margin-right: 130px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .contextImg:after {
    content: '';
    background: transparent;
    border: 3px solid #1891FF;
    top: 40px;
    right: -40px;
    bottom: -40px;
    left: 40px;
    position: absolute;
    z-index: -1;
  }

  .contextText {
    width: 950px;

    .schooltitle {
      text-align: center;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #1891FF;
      margin-bottom: 20px;
    }

    .text {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #787878;
      line-height: 36px;
    }
  }
}
</style>
